<!--
 * @Descripttion: 
 * @version: 
 * @Author: lihk
 * @Date: 2023-12-27 17:39:54
 * @LastEditors: lihk
 * @LastEditTime: 2024-01-06 16:30:08
-->
<template>
  <!-- @mousedown="handleMouseDown" @mousemove="handleMouseMove" @mouseup="handleMouseUp" -->
  <scroll-view class="scroll-container" refresher-background="#EEEADE" scroll-y ref="scrollview" :scroll-top='scrollTop' :scroll-into-view="scrollIntoView" scroll-with-animation refresher-enabled='true' :refresher-triggered="triggered"
    @refresherrefresh="loadMore">
    <view v-for="(message, index) in data" :key="index" class="message" :style="{'justify-content':message.isReceived?'':'flex-end'}">
      <view class="time">{{message.date}} {{message.time}}</view>
      <view class="flex" :style="{'align-self':!message.isReceived?'flex-end':'flex-start'}">
        <img class="headeUrl" v-if="message.isReceived" :src="headUrl.left" alt="">
        <view class="message-content" :class="message.isReceived?'message-left': 'message-right'">
          <img class="img" v-if="isImageURL(message.msg)" :src="message.msg" alt="" @click="previewImage(message.msg)">
          <div v-if="isImageURL(message.msg.split(';')[0],['mp3'])" @click="playAudio(message.msg.split(';')[0],['mp3'])">
            <LfAudio :src="message.msg.split(';')[0]" :audioTime="message.msg.split(';')[1]" :isProfessor='message.isReceived'></LfAudio>
          </div>
          <span v-if="!isImageURL(message.msg)&&!isImageURL(message.msg.split(';')[0],['mp3'])" class="message-text">{{ message.msg }}</span>
        </view>
        <img class="headeUrl" v-if="!message.isReceived" :src="headUrl.right" alt="">
      </view>
    </view>
  </scroll-view>
</template>

<script>
export default {
  name: 'scrollView',
  props: {
    data: {
      type: Array,
      default: () => []
    },
    triggered: {
      type: Boolean,
      default: false
    },
    headUrl: {
      type: Object,
      default: () => { }
    },
  },
  data () {
    return {
      scrollTop: 9999,
      scrollIntoView: '',
      audioElement: null,
      audioUrl: null
    };
  },
  components: {},
  created () { },
  methods: {
    loadMore () {
      this.$emit('loadMore')
    },
    scrollBottom () {
      this.$nextTick(() => {
        this.scrollTop++
      });
    },
    isImageURL (url, imageExtensions = [".jpg", ".jpeg", ".png", ".gif", ".bmp"]) {
      const lowercaseURL = url.toLowerCase();

      for (const extension of imageExtensions) {
        if (lowercaseURL.startsWith('http') && lowercaseURL.endsWith(extension)) {
          return true;
        }
      }
      return false;
    },
    previewImage (url) {
      this.$emit('previewImage', url)
    },
    playAudio (url) {
      // 有在播放的，暂停
      if (this.audioElement) {
        this.audioElement.pause();
        this.audioElement.currentTime = 0;
      }
      // 判断两次传入的url是否相同，避免重复播放
      if (this.audioUrl !== url) {
        this.audioUrl = url;
        this.audioElement = new Audio();
        this.audioElement.src = url;
        this.audioElement.play();
        // 监听播放结束
        this.audioElement.addEventListener('ended', () => {
          this.audioElement = null;
          this.audioUrl = null;
        });
      } else {
        this.audioUrl = null;
      }
    }
    // handleMouseDown (event) {
    //   console.log("🚀 ~ file: scrollView.vue:75 ~ handleMouseDown ~ event:", event)
    //   const isScrollTop = this.$refs.scrollViewRef.scrollTop === 0;
    //   this.startY = event.clientY;
    //   this.currentY = event.clientY;
    //   this.isDragging = isScrollTop;
    // },
    // handleMouseMove (event) {
    //   console.log("🚀 ~ file: scrollView.vue:82 ~ handleMouseMove ~ event:", event)
    //   if (this.isDragging) {
    //     this.currentY = event.clientY;
    //     // 在这里可以根据需要更新下拉刷新的 UI 或逻辑
    //   }
    // },
    // handleMouseUp (event) {
    //   console.log("🚀 ~ file: scrollView.vue:89 ~ handleMouseUp ~ event:", event)
    //   if (this.isDragging) {
    //     this.isDragging = false;
    //     // 在这里可以根据需要执行下拉刷新的操作
    //   }
    // },
  }
}
</script>
<style lang='scss' scoped>
.img {
  width: 200px;
  max-width: 100%;
}
.headeUrl {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}
.scroll-container {
  flex: 1;
  padding: 10px;
  width: calc(100% - 20px);
  overflow: auto;
}
.message {
  margin-bottom: 10px;
  display: flex;
  flex-direction: column;
  .time {
    text-align: center;
    font-size: 12px;
    color: #999;
    margin-bottom: 2px;
  }
}
.message-content {
  padding: 10px;
  border-radius: 10px;
  max-width: 95%;
}

.message-left {
  background-color: #fff;
  margin-left: 10px;
  position: relative;
}

.message-right {
  background-color: #d7ae3c;
  color: #fff;
  position: relative;
  margin-right: 10px;
}
.message-text {
  display: inline-block;
  max-width: 100%;
  word-break: break-word; /* 或者使用 word-break: break-word; */
}
// .message-right::after {
//   content: "";
//   position: absolute;
//   top: 15px;
//   right: -10px;
//   border-width: 6px;
//   border-style: solid;
//   border-color: transparent transparent transparent #41b883;
// }
</style>